window.onload = function() {
    function createAlbumElement(e) {
        var container = document.createElement("div");
        container.className = 'album';
        var coverImgBox = document.createElement('div');
        coverImgBox.className = 'cover';
        var delImgBox = document.createElement('div');
        delImgBox.className = 'mask';
        var coverImg = document.createElement('img');
        coverImg.src = e.cover;
        var delImg = document.createElement('img');
        delImg.src = './imgs/delete.png';
        delImg.addEventListener('click', (e) => {
            e.target.id = 'toDelete';
            var parDom = document.getElementById(e.target.id).parentElement.parentElement.parentElement;
            var NameDom = document.getElementById(e.target.id).parentElement.parentElement.nextElementSibling;
            // console.log(NameDom);
            var toDeleteData = albumData.find((ele) => ele?.name === NameDom.innerText);
            var toDeleteIndex = albumData.indexOf(toDeleteData);
            albumData.splice(toDeleteIndex, 1);
            parDom.remove();
        })
        delImgBox.appendChild(delImg);
        coverImgBox.appendChild(coverImg);
        coverImgBox.appendChild(delImgBox);
        container.appendChild(coverImgBox);

        var titleInfo = document.createElement('a');
        titleInfo.innerText = e.name;
        titleInfo.className = 'title nowrap';
        titleInfo.href = '#';
        container.appendChild(titleInfo);

        var authorInfo = document.createElement('a');
        authorInfo.innerText = e.singer;
        authorInfo.href = '#';
        container.appendChild(authorInfo);

        var timeInfo = document.createElement('div');
        timeInfo.innerText = e.release_time;
        container.appendChild(timeInfo);

        sec.appendChild(container);
    }

    function selectArea(area) {
        for(let i of albumData) {
            if(i.area === area) {
                createAlbumElement(i);
            }
        }
    }


    var app = document.getElementById("app");

    // 加载标题栏
    var headBar = document.createElement("header")
    var headBarInner = document.createElement("div");
    headBarInner.className = "header_inner"
    var headImg = document.createElement("img");
    headImg.src = "./imgs/logo.png";
    headBarInner.appendChild(headImg);
    headBar.appendChild(headBarInner)
    app.appendChild(headBar);

    // 加载Main部分
    var mainContainer = document.createElement("main");
    mainContainer.id = "mainbody";
    var tabContainer = document.createElement("ul");
    tabContainer.className = "tabs";
    var sec = document.createElement("section");
    sec.className = 'list';

    var sectionContainer = document.createElement("section");
    sectionContainer.className = "list";
    // 加载TabBar
    var areaList = [];
    var albumData = [];
    var areaRequest = new XMLHttpRequest();
    var albumRequest = new XMLHttpRequest();

    albumRequest.open('get', './data/albums.json');
    albumRequest.send('null');
    albumRequest.onload = function () {
        if (albumRequest.status === 200) {
            var json = JSON.parse(albumRequest.responseText);
            for (let i in json) {
                albumData[i] = json[i];
                console.log(albumData[i]);
            }
        }
    }

    areaRequest.open('get', './data/areas.json');
    areaRequest.send(null);
    areaRequest.onload = function() {
        var json = JSON.parse(areaRequest.responseText);
        for(let i in json) {
            areaList[i] = json[i];
            var item = document.createElement("li");
            item.innerHTML = areaList[i].name;
            if(i == 0) {
                item.className = "tab_item tab_active";
                selectArea(json[i].id);
            }
            else {
                item.className = "tab_item";
            }
            item.addEventListener('click', (e) => {
                if (e.target.className === 'tab_item tab_active'){
                    return;
                } else {
                    var pre_tab = document.getElementsByClassName('tab_active');
                    if (pre_tab.length > 0) {
                        pre_tab[0].className = 'tab_item';
                    }
                    e.target.className = 'tab_item tab_active';
                    sec.innerHTML = '';
                    selectArea(areaList.find((ele) => ele?.name === e.target.innerText).id);
                }
            });
            tabContainer.appendChild(item);
        }
    }
    mainContainer.appendChild(tabContainer);
    mainContainer.appendChild(sec);


    app.appendChild(mainContainer);


}
